<!-- A8-form -->
<template>
  <div>
    <a-layout-header style="color:white;text-align:center;font-weight:bold;font-size:18px;">A8空间机车俱乐部报名申请表
    </a-layout-header>
    <a-form-model class="a8-form" ref="form" :model="form" :rules="rules" :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }">
      <a-form-model-item label="姓名" prop="name">
        <a-input v-model="form.name" placeholder="请输入姓名" />
      </a-form-model-item>

      <a-form-model-item label="手机号码" prop="phone">
        <a-input v-model="form.phone" placeholder="请输入手机号码" />
      </a-form-model-item>

      <a-form-model-item label="身份证号码" prop="id_card">
        <a-input v-model="form.id_card" placeholder="请输入身份证号码" />
      </a-form-model-item>

      <a-form-model-item label="驾驶证类型" prop="driver_license_type">
        <a-select v-model="form.driver_license_type" placeholder="请选择驾驶证类型">
          <a-select-option value="C1D">C1D</a-select-option>
          <a-select-option value="C1E">C1E</a-select-option>
          <a-select-option value="C1F">C1F</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="血型" prop="blood_type">
        <a-select v-model="form.blood_type" placeholder="请选择血型">
          <a-select-option value="A">A</a-select-option>
          <a-select-option value="B">B</a-select-option>
          <a-select-option value="O">O</a-select-option>
          <a-select-option value="AB">AB</a-select-option>
          <a-select-option value="其他">其他</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="取得当前准驾时间" prop="license_obtained_date">
        <a-date-picker style="float:left" v-model="form.license_obtained_date" placeholder="请选择取得当前准驾时间" />
      </a-form-model-item>

      <a-form-model-item label="职业类型" prop="occupation_type">
        <a-select v-model="form.occupation_type" placeholder="请选择职业类型">
          <a-select-option value="企业主">企业主</a-select-option>
          <a-select-option value="公职人员">公职人员</a-select-option>
          <a-select-option value="普通职员">普通职员</a-select-option>
          <a-select-option value="自由职业">自由职业</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="工作单位" prop="company">
        <a-input v-model="form.company" placeholder="请输入工作单位" />
      </a-form-model-item>

      <a-form-model-item label="车辆信息" prop="vehicle_info">
        <a-input v-model="form.vehicle_info" placeholder="请输入车辆信息" />
      </a-form-model-item>

      <a-form-model-item label="车牌号码" prop="license_plate">
        <a-input v-model="form.license_plate" placeholder="请输入车牌号码" />
      </a-form-model-item>

      <a-form-model-item label="车辆排量" prop="vehicle_displacement">
        <a-select v-model="form.vehicle_displacement" placeholder="请选择车辆排量">
          <a-select-option value="250CC以下">250CC以下</a-select-option>
          <a-select-option value="250CC-999CC">250CC-999CC</a-select-option>
          <a-select-option value="1000CC以上">1000CC以上</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="申请加入A8空间机车俱乐部理由" prop="application_reason">
        <a-textarea v-model="form.application_reason" placeholder="请输入申请加入理由" :rows="4" />
      </a-form-model-item>

      <a-form-model-item prop="agreement">
        <a-checkbox v-model="form.agreement">为保障您的合法权益，请你先阅读并同意
          <br>
          <a-button type="link" @click="agreementShow = !agreementShow">
            《A8空间机车俱乐部会员协议》
          </a-button>
        </a-checkbox>
      </a-form-model-item>

      <a-form-model-item :wrapper-col="{ span: 16}">
        <a-button style="width:100%" type="primary" :loading="submitting" @click="handleSubmit">
          提交
        </a-button>
        <a-button style="width:100%;margin: 8px 0" @click="handleReset">
          重置
        </a-button>
      </a-form-model-item>
    </a-form-model>

    <div class="close-btn" v-show="agreementShow" @click="agreementShow = !agreementShow">
      <a-button type="primary" shape="circle" icon="close" />
      </a-button>
    </div>
    <iframe class="agreement-modal" v-show="agreementShow"
      src="http://115.239.217.129:8001/A8%E7%A9%BA%E9%97%B4%E6%9C%BA%E8%BD%A6%E4%BF%B1%E4%B9%90%E9%83%A8%E4%BC%9A%E5%91%98%E5%8D%8F%E8%AE%AE.html"
      frameborder="0"></iframe>
  </div>
</template>

<script>
  import {
    apiA8Create,
  } from '@/api/featch'

  export default {
    name: 'A8-form',
    data() {
      return {
        form: {
          name: '',
          phone: '',
          id_card: '',
          driver_license_type: undefined,
          blood_type: undefined,
          license_obtained_date: undefined,
          occupation_type: undefined,
          company: '',
          vehicle_info: '',
          license_plate: '',
          vehicle_displacement: undefined,
          application_reason: '',
          agreement: false
        },
        rules: {
          name: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 50,
              message: '姓名长度在 2 到 50 个字符',
              trigger: 'blur'
            }
          ],
          phone: [{
            required: true,
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入合法手机号码',
            trigger: 'blur'
          }],
          id_card: [{
            required: true,
            pattern: /^\d{17}[\dXx]$/,
            message: '请输入合法身份证号码',
            trigger: 'blur'
          }],
          driver_license_type: [{
            required: true,
            message: '请选择驾驶证类型',
            trigger: 'change'
          }],
          blood_type: [{
            required: true,
            message: '请选择血型',
            trigger: 'change'
          }],
          license_obtained_date: [{
            required: true,
            message: '请选择取得当前准驾时间',
            trigger: 'change'
          }],
          occupation_type: [{
            required: true,
            message: '请选择职业类型',
            trigger: 'change'
          }],
          company: [{
            required: true,
            message: '请输入工作单位',
            trigger: 'blur'
          }],
          vehicle_info: [{
            required: true,
            message: '请输入车辆信息',
            trigger: 'blur'
          }],
          license_plate: [{
            required: true,
            message: '请输入车牌号码',
            trigger: 'blur'
          }],
          vehicle_displacement: [{
            required: true,
            message: '请选择车辆排量',
            trigger: 'change'
          }],
          application_reason: [{
            required: true,
            message: '请输入申请加入理由',
            trigger: 'blur'
          }],
          agreement: [{
            required: true,
            message: '请勾选协议',
          }]
        },
        submitting: false,
        agreementShow: false,
      };
    },
    mounted() {
      document.title = 'A8空间机车俱乐部报名申请表'
    },
    methods: {
      async handleSubmit() {
        this.$refs.form.validate(async valid => {
          if (valid) {
            this.submitting = true;
            try {
              const response = await apiA8Create(this.form);
              console.log(response)
              if (response.code === 200) {
                this.$message.success('提交成功', 10);
                this.handleReset();
              } else {
                this.$message.error(response.message);
              }
            } catch (error) {
              this.$message.error('提交失败，请稍后重试');
            } finally {
              this.submitting = false;
            }
          }
        });
      },
      handleReset() {
        this.$refs.form.resetFields();
        this.form = {
          name: '',
          phone: '',
          id_card: '',
          driver_license_type: undefined,
          blood_type: undefined,
          license_obtained_date: undefined,
          occupation_type: undefined,
          company: '',
          vehicle_info: '',
          license_plate: '',
          vehicle_displacement: undefined,
          application_reason: '',
          agreement: false
        };
      }
    },
  };
</script>

<style lang="less" scoped>
  .a8-form {
    padding: 16px;
  }

  .agreement-modal {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1001;

  }

  .close-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    z-index: 2002;
  }
</style>